<template>
  <view class="cartoon-detail">
    <view class="header-wrap">
      <image :src="cartoon.cover_lateral" mode="heightFix" :lazy-load="true"></image>
      <view class="info-wrap">
        {{cartoon.name}}
      </view>
    </view>
    <view class="content-box">
      <view class="intro">
        {{cartoon.cartoon_introduction}}
      </view>
      <view class="title-box">
        <view class="title">
          连载中
        </view>
        <view class="move">
          <u-icon name="arrow-right" size="16"></u-icon>
        </view>
      </view>
      <scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="lower" @scroll="scroll">
        <view class="cartoon-warp">
          <block v-for="(item,index) in chapterList" :key="item.chapter_id">
            <view class="item-box" @click="onDetail(item.chapter_id)">
              <!-- {{item.title}} -->
              <view class="cover">
                <image :src="item.cover" mode="heightFix" :lazy-load="true"></image>
              </view>
              <view class="title">
                <u--text :lines="1" :text="item.title" />
              </view>
            </view>
          </block>
        </view>
      </scroll-view>
      <u-loading-page :loading="loading" font-size="14" color="#fb5f2c" loading-text="数据正在加载中...."
        image="/static/img/ycy.jpg" icon-size="80">
      </u-loading-page>
      <u-loading-icon mode="circle" :show="isShow" text="加载中" textSize="18"></u-loading-icon>
    </view>
    <view class="bottom-wrap">
      <u-button :text="chpaterFlag?'继续阅读':'开始阅读'" color="rgb(251, 95, 44)" shape="circle" @click="onDetail(chapterId)">
      </u-button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        loading: true,
        cartoon: {},
        scrollTop: 0,
        old: {
          scrollTop: 0
        },
        chapterId: 0,
        chapterList: [],
        total: 0,
        query: {
          page: 1,
          pageSize: 100,
          comic_id: ''
        },
        isShow: false,
        chpaterFlag: false,
        id: 0,
      }
    },
    onLoad(o) {
      this.getCartoonDetail(o.id)
      // this.getCartoonChapter(o.id)
      this.id = o.id
    },
    onShow() {
      this.getCartoonChapter(this.id)
    },
    methods: {
      async getCartoonDetail(id) {
        const res = await this.$api.getCartoonDetail({
          id
        })
        if (res.code == 200) {
          this.cartoon = res.data
          console.log(this.cartoon);
        }
      },
      async getCartoonChapter(id) {
        const user = uni.getStorageSync('user')
        const param = {
          uid: user.id,
          comic_id: id
        }
        // 获取阅读记录
        const res2 = await this.$api.historicalRecord(param)
        this.query.comic_id = id
        // 获取章节
        const res = await this.$api.getCartoonChapter(this.query)
        if (res.code == 200) {
          this.chapterList.push(...res.data?.data)
          this.total = this.chapterList.length
          this.chapterId = this.chapterList[0].chapter_id
          if (res2.data.length > 0) {
            this.chapterId = res2.data[0].chapter_id
            this.chpaterFlag = true
          }
          console.log(this.chapterId, 'chapterId');
        }
        this.loading = false
        this.isShow = false
      },
      lower(e) {
        this.query.page += 1
        this.isShow = true
        this.getCartoonChapter(this.query.comic_id)
      },
      scroll(e) {
        // console.log(e)
        this.old.scrollTop = e.detail.scrollTop
      },
      onDetail(chapter_id) {
        uni.navigateTo({
          url: `/pages/cartoon-page/cartoon-page?chapter_id=${chapter_id}&comic_id=${this.cartoon.id}`
        })
      }
    },

  }
</script>

<style lang="scss" scoped>
  .cartoon-detail {
    .header-wrap {
      position: relative;
      background: #000;
      color: #fff;

      image {
        -webkit-mask: -webkit-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1), rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.5));
      }

      .info-wrap {
        position: absolute;
        bottom: 80rpx;
        font-weight: 800;
        font-size: 36rpx;
        left: 50rpx;
        // background-color: rgba(0, 0, 0, .1);
      }
    }

    .content-box {
      position: relative;
      top: -30rpx;
      background-color: #fff;
      border-top-left-radius: 50rpx;
      border-top-right-radius: 50rpx;
      height: 900rpx;
      z-index: 333;

      .intro {
        padding: 30rpx 30rpx 0 30rpx;
        font-size: 24rpx;
        text-indent: 40rpx;
      }

      .title-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 90rpx;
        // background-color: red;
        padding: 0 20rpx;

        .title {
          font-size: 30rpx;
          font-weight: 700;
        }
      }

      .scroll-Y {
        height: 100vh;
        background-color: #fff;
        padding-bottom: 110rpx;

        .cartoon-warp {
          .item-box {
            display: flex;
            align-items: center;
            padding: 0 20rpx;

            .cover {
              image {
                width: 200rpx;
                height: 200rpx;
                margin-right: 20rpx;
              }
            }
          }
        }
      }
    }

    .bottom-wrap {
      position: fixed;
      display: flex;
      align-items: center;
      bottom: 0;
      width: 100%;
      height: 110rpx;
      line-height: 110rpx;
      border-top: 2rpx solid #eee;
      z-index: 333;
      background-color: #fff;
    }
  }
</style>
